<template>
	<CustomPage>
		<view class="page_container page_bg home">
			<view class="page_content">
				<div class="head_content">
					<CustomNavbar :left="0" :title="navbarTitle"></CustomNavbar>
				</div>
				<view class="main_content">
					<view class="swiper_box" style="margin-bottom: 40rpx;">
						<u-swiper :list="swiperList" keyName="image" bgColor="transparent" :height="200" :radius="12" :indicator="true" />
					</view>
					<view class="" v-if="menuList.length" style="margin-bottom: 40rpx;">
						<view class="grid_box">
							<view class="grid_line" v-for="(item, index) in $utils.regroupLength(menuList, 4)" :key="index">
								<view class="grid_item" v-for="(item1, index1) in item" :key="index1" @click="menuItemClick(item1)">
									<view class="img">
										<image class="image" :src="item1.image" mode="aspectFill" />
									</view>
									<view class="text u-line-1">{{ item1.name }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="picture_box" v-if="pictureList.length">
						<view class="title_box">
							<view class="left">绘图广场（查看精美图片）</view>
							<view class="right" @click="jumpView('/pages/drawing/atlas')">更多 >> </view>
						</view>
						<view class="list_box">
							<view class="item" v-for="(item, index) in pictureList" :key="index" @click="previewImage(item)">
								<image class="image" :src="item.image" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="case_box">
						<view class="title_box">
							<view class="left">新闻资讯（查看优质案例）</view>
							<view class="right" @click="jumpView('/pages/case/list')">更多 >> </view>
						</view>
						<view class="list_box">
							<view class="list_item" v-for="(item, index) in caseList" :key="item.id" @click="jumpView(`/pages/case/detail?id=${item.id}`)">
								<view class="img_box">
									<image class="image" :src="item.image" mode="aspectFill" />
								</view>
								<view class="content_box">
									<view class="line1 u-line-2">{{ item.title }}</view>
									<view class="line2 u-line-1">{{ item.description }}</view>
									<view class="line3 u-flex">
										<view class="line_left">
											<image class="image" src="/static/images/robot.png" mode="aspectFill" />
											<text class="text u-line-1">{{ item.user_name }}</text>
										</view>
										<view class="line_right">
											<image class="image" src="/static/icons/comment.png" mode="widthFix" />
											<text class="text">{{ item.views }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="vip_box" v-if="vipImage && isRecharge">
						<image class="image" :src="vipImage" mode="widthFix" @click="openVip" />
					</view>
				</view>
				<u-back-top :scroll-top="scrollTop" :duration="500" :customStyle="backTopStyle" :iconStyle="backTopIconStyle"></u-back-top>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<zero-privacy :onNeed="false" :hideTabBar="true"></zero-privacy>
			<!-- #endif -->
		</view>
	</CustomPage>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	export default {
		data() {
			return {
				navbarTitle: 'AI助手',
				scrollTop: 0,
				backTopStyle: {
					background: 'rgba(0, 0, 0, 0.5)'
				},
				backTopIconStyle: {
					fontSize: '32rpx',
					color: '#fff'
				},
				swiperList: [], // 轮播图
				caseList: [], // 案例新闻
				vipImage: '', // vip充值入口图片
				isRecharge: true, // 是否限时充值入口
				isIosPay: this.$store.state.app.iospay, // ios充值入口是否开启
				pictureList: [], // 图片列表
				menuList: [], // 功能菜单
			}
		},
		computed: {
			...mapGetters("user", ["token", "userInfo"]),
			...mapGetters("app", ["title", "iospay", "theme"]),
		},
		watch: {
			title(newValue, oldValue) {
				this.navbarTitle = newValue
			},
			iospay(newValue, oldValue) {
				this.isIosPay = newValue
				let isIos = uni.getSystemInfoSync().osName == 'ios' ? true : false
				if(!this.isIosPay && isIos) {
					this.isRecharge = false
				}
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getPageData()
			this.getPictureList()
			this.getMenuList()
			
			this.navbarTitle = this.title
			
			// #ifdef MP-WEIXIN
			let isIos = uni.getSystemInfoSync().osName == 'ios' ? true : false
			if(!this.isIosPay && isIos) {
				this.isRecharge = false
			}
			// #endif
		},
		methods: {
			// 获取功能菜单列表
			getMenuList() {
				this.$request('common.module').then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							this.menuList = res.data
						}
					}
				})
			},
			// 菜单分类
			menuItemClick(item) {
				if(item.type == 'draw') {
					const obj = {
						id: item.prompt_id,
						mode: item.mode
					}
					uni.navigateTo({
						url: `/pages/drawing/index?t=${encodeURIComponent(JSON.stringify(obj))}`
					})
				} else if(item.type == 'write') {
					if(item.prompt_id == 0) {
						uni.switchTab({
							url: '/pages/tool/index'
						})
					} else {
						uni.navigateTo({
							url: `/pages/tool/info?id=${item.prompt_id}`
						})
					}
				} else if(item.type == 'rule') {
					if(item.prompt_id == 0) {
						uni.navigateTo({
							url: '/pages/role/index'
						})
					} else {
						const obj = {
							id: item.prompt_id,
							title: item.name
						}
						uni.navigateTo({
							url: `/pages/helper/role?t=${encodeURIComponent(JSON.stringify(obj))}`
						})
					}
				}
			},
			// 查看图片
			previewImage(item) {
				const d = encodeURIComponent(JSON.stringify([item]))
				uni.navigateTo({
					url: '/pages/drawing/preview?d=' + d
				})
			},
			// 获取展示图片
			getPictureList() {
				this.$request('drawing.piazza', { type: 'index', pagesize: 10 }).then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							this.pictureList = res.data
						}
					}
				})
			},
			// 去充值
			openVip() {
				if(!this.token) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					
					// #ifdef MP-WEIXIN
					const timer = setTimeout(() => {
						uni.switchTab({
							url: '/pages/user/index'
						})
						clearTimeout(timer)
					}, 1500)
					// #endif
					
					return
				}
				this.jumpView('/pages/user/vip')
			},
			// 跳转页面
			jumpView(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取页面中展示内容
			getPageData() {
				this.$request('common.swiper').then(res => {
					if(res.code === 1) {
						this.swiperList = res.data.filter(item => item.name == 'uniappindexfocus')
						this.vipImage = res.data.filter(item => item.name == 'uniappindexside')[0].image
					}
				})
				this.$request('case.list', { flag: '' }).then(res => {
					if(res.code === 1) {
						this.caseList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		.main_content {
			overflow-y: auto;
			padding: 24rpx 40rpx 48rpx 40rpx;
			
			/* #ifdef H5 */
			padding: 24rpx 40rpx 140rpx 40rpx;
			/* #endif */
			
			.grid_box {
				margin: 0 -40rpx;
				
				.grid_line {
					display: flex;
					margin-bottom: 36rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.grid_item {
						width: 25%;
						
						.img {
							.image {
								width: 100%;
								height: 100%;
							}
						}
						
						.text {
							font-size: 24rpx;
							// color: #666;
							color: var(--text-color);
							text-align: center;
							margin-top: 20rpx;
							width: 100%;
							padding: 0 8rpx;
						}
					}
				}
			}
			
			.swiper_box {
				// margin: 40rpx 0;
			}
			
			.title_box {
				font-weight: bold;
				// color: #000;
				color: var(--title-color);
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
				
				.left {
					font-size: 32rpx;
				}
				
				.right {
					font-size: 24rpx;
				}
			}
			
			.case_box {
				.list_box {
					margin: 0 -40rpx;
					background: #fff;
					border-radius: 24rpx 24rpx 0 0;
					padding: 0 40rpx;
					
					.list_item {
						padding: 32rpx 0;
						border-bottom: 2rpx solid #E6E6E6;
						display: flex;
						
						&:last-child {
							border-bottom-color: transparent;
						}
						
						.img_box {
							width: 280rpx;
							height: 188rpx;
							margin-right: 32rpx;
							
							.image {
								width: 100%;
								height: 100%;
								border-radius: 24rpx;
								object-fit: cover;
							}
						}
						
						.content_box {
							flex: 1;
							font-size: 24rpx;
							color: #999;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							
							.line1 {
								font-size: 28rpx;
								color: #333;
							}
							
							.line2 {
								
							}
							
							.line3 {
								display: flex;
								align-items: center;
								justify-content: space-between;
								
								.line_left,
								.line_right{
									display: flex;
									align-items: center;
									
									.image {
										width: 32rpx;
										height: 32rpx;
										margin-right: 4rpx;
									}
									
									.text {}
								}
								
								.line_left {
									flex: 1;
									
									.image {
										margin-right: 16rpx;
									}
									
									.text {
										flex: 1;
									}
								}
							}
						}
					}
				}
			}
			
			.vip_box {
				margin-top: 40rpx;
				
				.image {
					width: 100%;
					border-radius: 20rpx;
				}
			}
		
			.picture_box {
				margin-bottom: 40rpx;
				
				.list_box {
					margin: 0 -40rpx;
					padding: 0 40rpx;
					display: flex;
					overflow-x: auto;
					
					.item {
						width: 292rpx;
						height: 372rpx;
						flex-shrink: 0;
						margin-right: 20rpx;
						border-radius: 20rpx;
						overflow: hidden;
						
						&:last-child {
							margin-right: 0;
						}
						
						.image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>